import React, { Component } from 'react';
import { NavBar, SearchBar } from 'antd-mobile'
import { getHostprolist } from '../api/allpro'


import '../styles/Search.scss'
class Search extends Component {
    constructor(props) {
        super(props)
        this.state = {
            hotlist: []
        }
    }
    //返回按钮
    back() {
        this.props.history.goBack()
    }
    async componentDidMount() {
        //热门搜索
        let res = await getHostprolist()
        // console.log(res.data.list, '热门搜索');
        this.setState({
            hotlist: res.data.list
        })

    }
    //搜索时请求
   async goSearch(val){
        // console.log(val);
       this.props.history.push({pathname:'/index/allgoods',state:{key:val}})
    }
    render() {
        return (
            <div className='search'>
                <NavBar onBack={() => { this.back() }}>搜索</NavBar>
                <div className='ipt'>
                    <SearchBar placeholder='搜索店铺内商品' 
                    onSearch={(val)=>{this.goSearch(val)}}
                    showCancelButton={() => true} />
                </div>
                <div className='historysearch'>
                  <h3>最近搜索</h3>
                     <div className='box'>
                         <span>sk2</span>
                     </div>
                </div>
                <div className='hotsearch'>
                   <h3>热门搜索</h3>
                  <div className='hotbox'>
                  {
                    this.state.hotlist.map((item,index)=>{
                        return (
                            <span key={index} onClick={()=>{this.goSearch(item)}}>{item}</span>
                        )
                    })
                   }
                  </div>
                </div>
            </div>
        );
    }
}

export default Search;